<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <title>标签选择</title>
  <link rel="stylesheet" href="./css/tag.css" />
</head>
<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>

<body>
<div id="app">
  <div  class="wrap">
    <h2>请选择自己的标签</h2>
    <ul class="list">
      <li v-for="i in tag">
        <h4>{{i.tagname}}</h4>
        <form method="post" action="">
          <div>
            <el-checkbox-group v-model="tagss" >
              <el-checkbox-button v-for="ii in i.tags" :label="ii" :key="ii" :value="ii.tagname">{{ii.tagname}}</el-checkbox-button>
            </el-checkbox-group>
          </div>
        </form>
      </li>
      <el-button type="primary" @click="addTag">确定</el-button>
    </ul>
  </div>
</div>
</body>
<script>
  var v = new Vue({
    el: "#app",
    data: {
      user:{
        tags:[]
      },
      tag:{
        tagname:'',
        tags:[]
      },
      tagss:[]
    },
    created() {

      axios.get("tag/tag/getTags").then(res=>{
        this.tag = res.data;
      })
    },
    methods: {
      addTag(){
        this.tagss.forEach(tag => {
          this.user.tags.push(tag.tagname);
        });
        console.log('上传',this.user);
        axios.post("user/user/addTag",this.user).then(res=>{
            if (res.data.code==1){
              alert('添加成功');
              location.href="index.html";
            }else{
              alert('添加失败');
            }
        })
      }
    },
  });
</script>

</html>
